<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>患者行为统计</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="highcharts.src.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            font-family: -apple-system, system-ui, '微软雅黑', 'Microsoft YaHei', '华文细黑', 'STXihei', 'STHeiti Light', 'STHeiti', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
        }
        body {
            margin: 0;
        }
        .page {
            margin: 20px;
        }

        .div {
            max-width: 70em;
            margin-left: auto;
            margin-right: auto;
            background: #fff;
            height: 500px;
        }
        .name{
            padding: 0;
        }
        .message{
            padding: 10px 0;
        }
        .modal-body>div{
            padding: 0;
        }
        .modal-content{
            width: 800px;
            position: relative;
            left: -100px;
        }
        input[type="text"] {
            border: 1px solid #ccc;
            margin-bottom: 2px;
            padding: 2px 4px;
        }

    </style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <span class="navbar-brand">患者行为统计</span>
</nav>

<div class="page">
    <div class="container">
        <div class="row"> 
            <div class="col-sm">
                <div id="sym-pie" style="height: 320px;"></div>
            </div>
            <div class="col-sm">
                <div id="time-pie" style="height: 320px;"></div>
            </div>
            <div class="col-sm">
                <div id="time-line" style="height: 320px;"></div>
            </div>
        </div>
    </div>

    <h5>患者AMC使用情况</h5>
    <table class="table">
        <thead class="thead-light">
            <tr>
                <th>患者</th>
                <th>参与者</th>
                <th>性别</th>
                <th>年龄</th>
                <th>登录时间</th>
                <th>搜索症状</th>
                <th>使用时间</th>
                <th>AMC诊断结果</th>
            </tr>
        </thead>
        <tbody class="tbdy">
            <tr>
                <td>王建国</td>
                <td>本人</td>
                <td>男</td>
                <td>65岁</td>
                <td>2018/9/17</td>
                <td>头痛</td>
                <td>1min15s</td>
                <td>请在24小时内去看医生：建议就诊科室为全科医疗科或神经内科</td>
            </tr>
            <tr>
                <td>王建国</td>
                <td>家属</td>
                <td>男</td>
                <td>65岁</td>
                <td>2018/9/24</td>
                <td>头晕</td>
                <td>3min17s</td>
                <td>不常发作的头晕伴心血管症状：建议就诊科室为全科医疗科或心血管内科</td>
            </tr>
            <tr>
                <td>王建国</td>
                <td>家属</td>
                <td>男</td>
                <td>65岁</td>
                <td>2018/10/8</td>
                <td>呼吸困难</td>
                <td>4min06s</td>
                <td>症状提示新发的心力衰竭：建议就诊科室为全科医疗科,心血管内科或者急诊科</td>
            </tr>
            <tr>
                <td>Sonic</td>
                <td>本人</td>
                <td>女</td>
                <td>27岁</td>
                <td>2018/10/8</td>
                <td>头痛</td>
                <td>2min33s</td>
                <td>无</td>
            </tr>
        </tbody>
    </table>
    <footer class="page-footer font-small" style="margin-top: 100px;">
        <!-- Copyright -->
        <div class="footer-copyright text-center" style="color: #bbb; font-size: 12px;">© 2018 Copyright 惠每移健
        </div>
        <!-- Copyright -->        
    </footer>
</div>
</body>
<script>
    Highcharts.chart('sym-pie', {
        credits: false,
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: '症状统计'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    distance: -50,
                    style: {
                        fontWeight: 'normal',
                        color: 'white',
                        fontSize: 14
                    }
                }
            }
        },
        series: [{
            name: '比例',
            colorByPoint: true,
            data: [{
                name: '头痛/头晕',
                y: 3
            }, {
                name: '呼吸困难',
                y: 1
            }]
        }]
    });
    Highcharts.chart('time-pie', {
        credits: false,
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: '使用时长统计'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    distance: -50,
                    style: {
                        fontWeight: 'normal',
                        color: 'white',
                        fontSize: 14
                    }
                }
            }
        },
        series: [{
            name: '比例',
            colorByPoint: true,
            data: [{
                name: '1~2分钟',
                y: 1
            }, {
                name: '2~3分钟',
                y: 1
            }, {
                name: '3分钟以上',
                y: 2
            }]
        }]
    });


    Highcharts.chart('time-line', {
        credits: false,
        title: {
            text: '使用次数'
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: { // don't display the dummy year
                month: '%e. %b',
                year: '%b'
            },
            title: {
                text: '日期'
            }
        },
        yAxis: {
            title: {
                text: '使用次数'
            },
            min: 0
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                label: {
                    connectorAllowed: false
                }
            }
        },
        series: [{
            name: '次数',
            data: [[Date.UTC(2018, 8, 17), 1], [Date.UTC(2018, 8, 24), 1], [Date.UTC(2018, 9, 18), 2]]
        }],

        responsive: {
            rules: [{
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }

        });
</script>
</html>
